<template>
  <div class="personal">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft()"
    />
    <!-- 背景 -->
    <div class="background"></div>
    <div class="box">
      <div class="first" @click="updateUser_img()">
         <div class="one"> <van-uploader :after-read="afterRead" >头像</van-uploader></div>
        <van-uploader :after-read="afterRead" ><div><img :src="info.userImg" /></div></van-uploader>
      </div>
      <div class="first">
        <div class="one">用户id</div>
        <div>{{ info.userId }}</div>
      </div>
      <div class="first">
        <div class="one">昵称</div>
        <div>{{ info.nickName }}</div>
      </div>
      <div >
        <div class="one">简介</div>
        <div> {{info.desc}} </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Personal",
  data() {
    return {
      token: "",
      info:[],
    };
  },
  //生命周期
  created() {
    this.token = localStorage.getItem("tk__");
    this.personalInfo();
  },
  methods: {
    personalInfo() {
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString: this.token,
        },
      }).then((res) => {
        this.info = res.data.result[0];
        if(this.info.desc == "")
        this.info.desc ="这家伙很懒，什么都没有留下!";
        console.log(this.info);
      });
    },
  onClickLeft(){
    this.$router.go(-1);
  },
  updateUser_img(){
      console.log("更换照片成功");
  },
  },
};
</script>
<style lang="less" scoped>
.personal{
  background-color: #f7f7f7;
}
.background{
  width: 100%;
  height: 100px;
  background-color:#0c34ba;
}
.box{
  width: 360px;
  height: 220px;
  background-color: white;
  margin: -20px auto;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0px 10px;
  box-sizing: border-box;
  padding-bottom: 30px;
  }
.first{
  display: flex;
  border-bottom: 1px gray solid;
}
.first img{
  height: 35px;
  border-radius: 35px;
  overflow: hidden;
}
.one{
  flex: 1;
  line-height: 35px;
}
.box div:nth-child(4){
  display: flex;
}
.box div:nth-child(4) div:nth-child(2){
  color: gray;
}
.first div:nth-child(2){
  color: gray;
}
/deep/.one .van-uploader{
  width: 50%;
}
</style>